<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>meta</title>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="../node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">

  /**
   * 1: router-view中包含router-view
   * 2:路由规则中存在子路由
   * */
  var isLogin = false;
  var Login = {
    template:`
        <div>
          我是登录页面
        </div>
    `,
    created:function(){
      isLogin = true;
    }
  }
  var Music = {
    template:`
      <div>
        我是音乐页面
      </div>
    `,
    created:function(){
      console.log(this.$route.params)
    }
  }

  var router = new VueRouter();
  /**
   * 可以多次的追加路由规则，动态的获取路由规则
   * 更为灵活，可以方便调用后追加路由规则
   * */
  router.addRoutes([
      //默认首页路由
      { path:'/',redirect:{name:'login'} },

      { name:'login',path:'/login',component:Login },
      // meta:{isChecked:true} 给未来路由的权限控制..  全局路由守卫 来做参照条件

      { name:'music',path:'/music',component:Music,
        meta:{isChecked:true}
      }
  ]);
  router.beforeEach(function(to,form,next){
      console.log(to);
      console.log(form);
      // Login等..放行
      if(!to.meta.isChecked){
        next();  // 不调用next 就会卡住
      } else{
          // 音乐访问，需要判断是否登录
          if(isLogin){
            next();  //放行
          } else{
            alert('请先登录..');
            //重定向 /login
            next({ name:'login' });
          }
      }

  });

  var App = {
    template:`
        <div>
           <router-link :to="{name:'login'}">登录</router-link>
           <router-link :to="{name:'music'}">去听歌</router-link>
           <router-view></router-view>
        </div>
      `
  };

  new Vue({
    el:'#app',
    router:router,
    components:{
      app:App
    },
    template:'<app/>'
  });

</script>
</body>
</html>

